<template>
  <div class="login">
    <div class="log">
      <div id="contain">
        <div class="nav">
          <p>希古尚博-存酒系统</p>
        </div>
        <p style="text-align: center;font-size: 34px;margin-bottom: 60px;margin-top: 35px;">登&nbsp&nbsp录</p>
        <form >
          <div><input type="text" name="" id="userId" placeholder="请输入用户名" v-model="userName"></div>
          <div><input type="password" name="" id="pwd" placeholder="密码" v-model="passWord"></div>
          <div style="position: relative;color: rgb(167,166,164);">
            <div style="display: inline-block;float: left;"> <input type="checkbox" id="checkbox_a1" class="chk_1" checked /><label for="checkbox_a1"></label><span style="position: absolute;top: 0px;">记住密码</span></div>
            <span style="float: right;text-decoration: none;"><a href="" style="color: rgb(167,166,164);">忘记密码?</a></span>
          </div>
        </form>
        <div style="clear: both;"><button id="submitBtn" @click="login">登录</button></div>
        <p id="reg"><a href="">现在注册</a></p>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        userName:"",
        passWord:""
      }
    },
    mounted(){

    },
    methods:{
      // 登录
     login:function () {
       // body...
       let _this = this
       this.$http.post(`${this.URL}/api/user/login`,{
        YHBM:_this.userName,
        PSWD:_this.passWord
       }) 
       .then(function (res) {
       // body...
       console.log(res)
       if (res.data.error_code==0) {
          sessionStorage.userinfo = JSON.stringify(res.data)
          _this.$router.push('/index')
       }
       else{
          _this.instance()
       }
     })
     },
     // 消息弹出框
      instance:function(){
            const title = '消息';
            const content = '<p>登录失败</p>';
             this.$Modal.info({
              title:title,
              content:content
            })
      }
     
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  *{
    margin: 0;padding:0;
  }
  .chk_1{
    display: none;
  }
  .log{
    width: 100%;
    height: 1080px;
    padding-top: 132px;
    background: url("../assets/img/bac1.png") no-repeat ;
  }
  #contain{
    width: 78%;height: 768px;
    background: rgba(250,250,250,0.8);
    margin: 0 auto;
    padding-top: 50px;
    padding-left: 40px;
    text-align: center;
    padding-right: 40px;
  }
  .nav{
   font-size: 20px;
   color: rgb(94,187,231);
   text-align: left;
 }
 #userId,#pwd{
  width: 430px;
  height: 70px;
  border-radius: 10px;
  outline: 0;
  border-color: rgb(187,185,192);
  border: 2px solid;
  margin-bottom: 45px;
  padding-left: 15px;
  line-height: 70px;
  font-size: 23px;
  color: rgb(167,166,164);
  text-decoration: none;
}
form{
  margin: 0 auto;
  width: 435px;
}

.chk_1 + label {
  background-color: #FFF;
  border: 1px solid #C1CACA;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);
  padding: 9px;
  border-radius: 5px;
  display: inline-block;
  position: relative;
  margin-right: 30px;
}
.chk_1 + label:active {
  box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1);
}

.chk_1:checked + label {
  background-color: #ECF2F7;
  border: 1px solid #92A1AC;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05), inset 15px 10px -12px rgba(255, 255, 255, 0.1);
  color: #243441;
}

.chk_1:checked + label:after {
  content: '\2714';
  position: absolute;
  top: -6px;
  left: 0px;
  color: #758794;
  width: 100%;
  text-align: center;
  font-size: 1.4em;
  padding: 1px 0 0 0;
  vertical-align: text-top;
}
a{
  text-decoration: none;
}
#submitBtn{
  width: 450px;
  height: 70px;
  border-radius: 10px;
  outline: 0;
  border: rgb(187,185,192); 
  margin-bottom: 45px;
  line-height: 70px;
  font-size: 23px;
  background:linear-gradient(to right,#5ebbe7,#b490ca);
  text-decoration: none;
  margin-top: 60px;
  overflow: hidden;
  color: white;
  font-size: 37px;
  margin-bottom: 55px;
}
#reg a{
  text-align: center;
  text-decoration: none;color: #5ebbe7;
  font-size: 20px;
}
</style>
